<template>
  <div class="message">
    <div class="message-header">消息</div>
    <div class="content">
      
      <chatcps @onclick="tochartpage" 
      v-for="item in socketCollections" 
      :title="item.fromws.userName"
      :school="item.fromws.school"
      :item="item"
       />
    </div>
  </div>
</template>

<script>
import chatcps from '@/components/Chatcps.vue'
import { mapState } from 'vuex';
export default {
  components: {
    chatcps
  },
  data() {
    return {
      msgarr:[],
      socketCollections2:this.socketCollections || []
    }
  },
  computed:{
    ...mapState(['socketCollections'])
  },
  methods: {
    tochartpage(e) {
      console.log(e);
      this.$router.push({name:'chartpage',query:e})
    }
  },
  mounted(){
    //从本地缓存中读取聊天连接对象
    // this.chatlist = JSON.parse(localStorage.getItem('chatlist')) || {}
    console.log(this.socketCollections);
  }
}
</script>

<style lang="less" scoped>
.message {
  height: calc(100vh - 50px);

  .message-header {
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
  }

  .content {
    background: rgb(243, 241, 222);
    height: calc(100vh - 120px);
    width: 100vw;
    padding: 5px 10px;
    box-sizing: border-box;
  }
}
</style>